<template>
  <div class="button" @click="handleClick">
    <div class="btn">{{ title }}</div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "确认",
    },
  },
  methods: {
    handleClick() {
      // 当点击按钮时触发自定义的点击事件
      this.$emit("click");
    },
  },
};
</script>

<style scoped lang="less">
.button {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  z-index: 0;
  backdrop-filter: blur(3px);
  cursor: pointer; /* 添加一个指针样式以表明这是可点击的 */
  div {
    width: 327px;
    height: 54px;
    background: #0065ff;
    border-radius: 12px 12px 12px 12px;
    font-weight: 600;
    font-size: 17px;
    color: #ffffff;
    line-height: 22px;
    text-align: center;
    line-height: 54px;
  }
}
</style>
